<template>
	<view class="register-box">
		<view class="register-header">
			<view class="back-icon" @click="goBack">
				<image src="/static/icon/left.svg" mode=""></image>
			</view>
		</view>
		<view class="register-title">
			<text>{{ t("register.kszc") }}</text>
		</view>
		<view class="register-subtitle syl">
			<text>{{ t("register.cjygzh") }}</text>
		</view>
		
		<view class="register-form">
			<u-form :model="formData" ref="uForm" errorType="message">
				<!-- 用户名输入框 -->
				<view class="form-item" :class="{active:active=='userName'}">
					<u-input
						v-model="formData.username"
						:placeholder="t('register.qsryhm')"
						border="none"
						size="large"
						placeholderStyle="color: #9EA3AE; font-size: 24rpx; font-family: SYL"
						inputAlign="left"
						@blur="active=''"
						@focus="active='userName'"
					>
						<template #prefix>
							<image class="input-icon" src="/static/icon/user-icon.svg" style="width: 27.91rpx;height: 34.88rpx; margin-left: 14rpx;"></image>
						</template>
					</u-input>
				</view>
				
				<!-- 邮箱输入框 -->
				<view class="form-item" :class="{active:active=='email'}">
					<u-input
						v-model="formData.email"
						:placeholder="t('register.qsryx')"
						border="none"
						size="large"
						placeholderStyle="color: #9EA3AE; font-size: 24rpx; font-family: SYL"
						inputAlign="left"
						@blur="active=''"
						@focus="active='email'"
					>
						<template #prefix>
							<image class="input-icon" src="/static/icon/email-icon.svg"></image>
						</template>
					</u-input>
				</view>
				
				<!-- 验证码输入框 -->
				<view class="code-box">
					<view class="form-item captcha-item" :class="{active:active=='captcha'}">
						<u-input
							v-model="formData.captcha"
							:placeholder="t('register.qsryzm')"
							border="none"
							size="large"
							placeholderStyle="color: #9EA3AE; font-size: 24rpx; font-family: SYL"
							inputAlign="left"
							@blur="active=''"
							@focus="active='captcha'"
						>
							<template #prefix>
								<image class="input-icon" src="/static/icon/captcha-icon.svg"></image>
							</template>
						</u-input>
					</view>
					<!-- 发送验证码 -->
					<view class="send-btn" :class="{'counting': isCounting}" @click="sendCaptcha">
						{{ isCounting ? `${t('register.send')}(${countdown}s)` : btnText }}
					</view>
				</view>
				
				
				<!-- 密码输入框 -->
				<view class="form-item" :class="{active:active=='password'}">
					<u-input
						v-model="formData.password"
						:placeholder="t('register.qsrmm')"
						border="none"
						size="large"
						:password="!showPassword"
						placeholderStyle="color: #9EA3AE; font-size: 24rpx; font-family: SYL"
						inputAlign="left"
						@blur="active=''"
						@focus="active='password'"
					>
						<template #prefix>
							<image class="input-icon" src="/static/icon/password-icon.svg"></image>
						</template>
						<template #suffix>
							<image 
								class="password-icon" 
								:src="showPassword ? '/static/icon/eye-open.svg' : '/static/icon/eye-close.svg'"
								@click="togglePasswordVisibility"
							></image>
						</template>
					</u-input>
				</view>
			</u-form>
			
			<!-- 服务条款和隐私政策 -->
			<view class="agreement-box">
				<view class="check-box" :class="{'active':checked}" @click="checked=!checked">
					<image src="/static/icon/checked-icon.svg" class="icon" ></image>
				</view>
				<text class="agreement-text">{{ t('register.wty') }}</text>
				<text class="agreement-link">{{ t('register.fwtk') }}</text>
				<text class="agreement-text">{{ t('register.and') }}</text>
				<text class="agreement-link">{{ t('register.yszc') }}</text>
			</view>
		</view>
		
		<view class="bottom-box">
			<!-- 创建账户按钮 -->
			<view class="register-btn btn-primary" @click="submitForm">
				{{ t('register.cjyh') }}
			</view>
			
			<!-- 已经注册？登录 -->
			<view class="login-link syl">
				<text>{{ t('register.yjzc') }}</text>
				<text class="login-text" @click="goToLogin">{{ t('register.login') }}</text>
			</view>
		</view>
		<GlobalPopup ref="popup"></GlobalPopup>
	</view>
</template>

<script setup>
import { ref, reactive, onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { authApi } from '@/api/auth';
const popup = ref()
const { t } = useI18n();
const checked = ref(false);
const active = ref("")
const isCounting = ref(false);
const btnText = ref(t('register.fsyzm'))
const countdown = ref(60);
let timer = null; // 定时器

// 表单数据
const formData = reactive({
	username: '',
	email: '',
	captcha: '',
	password: '',
});

// 密码显示控制
const showPassword = ref(false);
const togglePasswordVisibility = () => {
	showPassword.value = !showPassword.value;
};

// 返回上一页
const goBack = () => {
	uni.navigateBack();
};

// 发送验证码
const sendCaptcha = async () => {
	// 如果正在倒计时中，不允许再次发送
	if (isCounting.value) {
		return;
	}
	
	if (!formData.email) {
		popup.value.open({
			title: t('register.qsryx'),
			loading: false
		});
		return;
	}
	
	try {
		// 调用发送验证码接口
		const response = await authApi.sendMailCode({
			email: formData.email,
			type: 0 // 0表示注册验证码
		});
		
		// 发送成功，显示提示
		popup.value.open({
			title: '验证码发送成功',
			content: '请查收邮箱中的验证码',
			loading: false
		});
		
		// 开始倒计时
		isCounting.value = true;
		countdown.value = 60;
		
		// 清除可能存在的旧定时器
		if (timer) {
			clearInterval(timer);
		}
		
		timer = setInterval(() => {
			countdown.value--;
			if (countdown.value <= 0) {
				// 倒计时结束
				clearInterval(timer);
				timer = null;
				isCounting.value = false;
				countdown.value = 60;
				// 修改按钮文字为"重新发送"
				btnText.value = t('register.cxfs')
			}
		}, 1000);
		
	} catch (error) {
		console.error('发送验证码失败:', error);
		popup.value.open({
			title: '发送失败',
			content: error.message || '验证码发送失败，请稍后重试',
			loading: false
		});
	}
};

// 提交表单
const submitForm = async () => {
	if (!formData.username) {
		popup.value.open({
			title: t('register.qsryhm'),
			loading: false
		});
		return;
	}
	if (!formData.email) {
		popup.value.open({
			title: t('register.qsryx'),
			loading: false
		});
		
		return;
	}
	if (!formData.captcha) {
		popup.value.open({
			title: t('register.qsryzm'),
			loading: false
		});
		return;
	}
	if (!formData.password) {
		popup.value.open({
			title: t('register.qsrmm'),
			loading: false
		});
		return;
	}
	if (!checked.value) {
		popup.value.open({
			title: t('register.qty'),
			loading: false
		});
		return;
	}
	
	try {
		// 显示加载状态
		popup.value.open({
			title: '注册中...',
			loading: true
		});
		
		// 调用注册接口
		const response = await authApi.createByEmail({
			email: formData.email,
			password: formData.password,
			nickname: formData.username,
			code: formData.captcha
		});
		
		// 注册成功
		popup.value.open({
			title: t('register.cjcg'),
			content: t('register.zzdl'),
			loading: false
		});
		
		// 延迟跳转到登录页面
		setTimeout(() => {
			uni.navigateTo({
				url: '/pages/account/login'
			});
		}, 2000);
		
	} catch (error) {
		console.error('注册失败:', error);
		popup.value.open({
			title: '注册失败',
			content: error.message || '注册失败，请检查信息后重试',
			loading: false
		});
	}
};

// 跳转到登录页面
const goToLogin = () => {
	uni.navigateTo({
		url: '/pages/account/login'
	});
};

// 组件卸载时清除定时器
onUnmounted(() => {
	if (timer) {
		clearInterval(timer);
		timer = null;
	}
});
</script>

<style lang="scss">
	.bottom-box{
		padding:0 0 80rpx;
		margin-top: 20vh;
	}
.register-box {
	padding: 0 40rpx;
	height: 100vh;
	background-color: #fff;
	
	.register-header {
		padding-top: 88rpx;
		display: flex;
		align-items: center;
		
		.back-icon {
			width: 69.77rpx;
			height: 69.77rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 17.44rpx;
			border: 1.74rpx solid #EFF6FF;
			
			image {
				width: 10.47rpx;
				height: 20.93rpx;
			}
		}
	}
	
	.register-title {
		margin: 60rpx 32rpx 0;
		font-size: 48rpx;
		color: #000000;
		font-weight: 500;
		line-height: 1.2;
	}
	
	.register-subtitle {
		margin: 22.65rpx 32rpx 0;
		font-size: 28rpx;
		color: #6C727F;
		margin-bottom: 60.98rpx;
	}
	
	.register-form {
		margin:  0 32rpx;
		.code-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.send-btn{
				flex: 1;
				width: 200.58rpx;
				line-height: 97.67rpx;
				border-radius: 27.91rpx;
				background: #0278DC;
				font-size: 27.91rpx;
				font-weight: 400;
				color: #fff;
				margin-bottom: 27.87rpx;
				margin-left: 33.1rpx;
				text-align: center;
				transition: all 0.3s;
				
				&.counting {
					background: rgba(2, 120, 220, 0.5)
				}
			}
			.form-item{
				flex: 1;
			}
		}
		.form-item {
			margin-bottom: 27.87rpx;
			border-radius: 27.91rpx;
			background: rgba(249, 250, 251, 1);
			padding: 24rpx 60.2rpx;
			border: 1px solid transparent;
			height: 100rpx;
			box-sizing: border-box;
			.input-icon {
				width: 41.86rpx;
				height: 41.86rpx;
				margin-right: 26rpx;
				transform: translateY(4px);
			}
			:deep(.uni-input-wrapper) {
				font-size: 28rpx;
				color: #121826;
				font-family: "SYL";
			}
			:deep(.u-input__content__subfix-password-shower) span{
				display: none;
			}
			.password-icon {
				width: 44rpx;
				height: 44rpx;
			}
			&.active{
				border: 1.74rpx solid rgba(59, 130, 246, 1);
			}
		}
		
		.captcha-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.u-input {
				flex: 1;
			}
			
			.captcha-btn {
				background: linear-gradient(90deg, #00E1B4 0%, #0278DC 100%);
				color: #fff;
				border-radius: 16rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
				margin-left: 20rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				box-sizing: border-box;
				box-shadow: 0 5rpx 10rpx rgba(2, 120, 220, 0.2);
			}
		}
		
		.agreement-box {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 30rpx;
			margin-bottom: 80rpx;
			padding-left: 10rpx;
			.check-box{
				width: 41.86rpx;
				height: 41.86rpx;
				border-radius: 13.95rpx;
				border: 1.74rpx solid #D3D5DA;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 14rpx;
				&.active{
					border: 1.74rpx solid #3B82F6;
					background-color: #3B82F6;
					.icon{
						display: block;
					}
				}
				.icon{
					width: 22.38rpx;
					height: 15.56rpx;
				}
			}
			.agreement-text {
				font-size: 24rpx;
				color: #394150;
				line-height: 1.5;
			}
			
			.agreement-link {
				font-size: 24rpx;
				color: #0278DC;
				line-height: 1.5;
			}
		}
	}
	
	.register-btn {
		width: 570.35rpx;
		height: 97.67rpx;
		border-radius: 26.16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 500;
		margin: 60rpx auto 0;
	}
	
	.login-link {
		margin-top: 15.68rpx;
		text-align: center;
		font-size: 28rpx;
		line-height: 40.41rpx;
		font-size: 27.91rpx;
		font-weight: 400;
		color:#9EA3AE;
		
		.login-text {
			color: #0278DC;
			margin-left: 6rpx;
		}
	}
}
</style>